<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>流水管理系统-权限管理</title>
<link rel="stylesheet" type="text/css" href="/static/plugins/layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="/static/css/power/power.css">
</head>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
		<!-- header nav部分 -->
		<div th:insert="~{/common/common :: copy}"></div>
		<div class="layui-body">
			<div class="layui-tab" lay-filter="demo">
			  <ul class="layui-tab-title">
			    <li class="layui-this" lay-id="resource">资源管理</li>
			    <li lay-id="role">角色分配</li>
			    <li lay-id="menu">菜单管理</li>
			  </ul>
			  <div class="layui-tab-content">
			    <div class="layui-tab-item layui-show"><div th:insert="~{/power/resource :: copy}"></div></div>
			    <div class="layui-tab-item"><div th:insert="~{/power/role :: copy}"></div></div>
			    <div class="layui-tab-item"><div th:insert="~{/power/menu :: copy}"></div></div>
			  </div>
			</div>
		</div>

<script type="text/javascript" src="/static/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="/static/plugins/layui/layui.all.js"></script>
<script>
layui.use(['element','tree'], function(){
  var $ = layui.jquery
  ,element = layui.element
  ,tree = layui.tree; //Tab的切换功能，切换事件监听等，需要依赖element模块
  
  
  $('.site-demo-active').on('click', function(){
    var othis = $(this), type = othis.data('type');
    active[type] ? active[type].call(this, othis) : '';
  });
  
  //渲染
  var inst1 = tree.render({
    elem: '#test1',  //绑定元素
    data: [{
      title: '江西', //一级菜单
      children: [{
        title: '南昌', //二级菜单
        children: [{
          title: '高新区' //三级菜单
        }]
      }]
    },{
      title: '陕西', //一级菜单
      children: [{
        title: '西安' //二级菜单
      }]
    }]
  });
});
</script>
</html>